<template>
    <div class="thecenterbox">
        <h2>听过</h2>
        <ul class="myhis">
            <li  @click="golove">
                <img v-lazy="loveimg" alt="">
                <div class="myhissvg">
                    <div class="thesvg">
                        <!-- <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-24gf-play"></use>
                        </svg> -->
                    </div>
                </div>
                <div class="mytitle">我的收藏</div>
            </li>
            <li>
                <img v-lazy="zuijinimg" alt="">
                <div class="myhissvg">
                    <div class="thesvg">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-24gf-play"></use>
                        </svg>
                    </div>
                </div>
                <div class="mytitle">最近播放</div>
            </li>
        </ul>
        <h2 style="margin-top: 30px;margin-bottom: 0px;">我的歌单</h2>
        <ul class="mygedan">
            <li>
                <div :class="['gbgd',{'gdactive':gaibiangd==true}]" @click="changegd">创建歌单</div>
            </li>
            <li>
                <div :class="['gbgd',{'gdactive':gaibiangd==false}]" @click="changegd">收藏歌单</div>
            </li>
        </ul>
        <ul class="gd">
            <!-- <loading v-show="qhgd"></loading> -->
            <li v-for='item in myarr' :key="item.id">
                <router-link :to='{path:"/songlist",query:{id:item.id}}'>
                    <div class="gdimg">
                        <img v-lazy='item.src' alt="">
                    </div>
                    <div class="gdname">
                        <div class="gdtitle">{{item.name}}</div>
                        <div class="songnum">{{item.songnum}}首</div>
                    </div>
                    <div class="gdding">
                        ›
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    nane:"thecenter",
    data(){
        return{
            zuijinimg:'',
            loveimg:'',
            gaibiangd:true,
            chuangjian:[],
            shoucang:[],
            myarr:[]
        }
    },
    created(){
        if(sessionStorage.getItem("obj") == null){
            this.getdata()
        }else{
            let obj = JSON.parse(sessionStorage.getItem("obj"))
            this.shoucang = obj.shoucang
            this.chuangjian = obj.chuangjian
            this.loveimg = obj.img[0]
            this.zuijinimg = obj.img[1]
            this.$emit('gdok', {status:true})
            this.myarr = this.chuangjian
        }
    },
    methods:{
        getdata(){
            // console.log("进来了")
            this.id = localStorage.getItem("_token")
            // 获取最近听的歌20首
            axios.get(`https://apis.netstart.cn/music/user/record?uid=${this.id}`,{
                params:{

                }
            }).then(
                res=>{
                    this.zuijinimg = res.data.allData[0].song.al.picUrl
                    // 获取歌单列表
                    axios.get(`https://apis.netstart.cn/music/user/playlist?uid=${this.id}`,{
                        params:{

                        }
                    }).then(
                        res=>{
                            // console.log('gedan',res)
                            let arr = res.data.playlist
                            this.loveimg = res.data.playlist[0].coverImgUrl
                            for(let i = 1;i<arr.length;i++){
                                let obj = {}
                                obj.src = arr[i].coverImgUrl
                                obj.name = arr[i].name
                                obj.songnum = arr[i].trackCount
                                obj.id = arr[i].id
                                if(arr[i].description == null){
                                    this.chuangjian.push(obj)
                                }else{
                                    this.shoucang.push(obj)
                                }
                            }
                            this.$emit('gdok', {status:true})
                            // console.log(333)
                            this.myarr = this.chuangjian
                            let obj = {}
                            let img =[this.loveimg,this.zuijinimg]
                            obj.chuangjian = this.chuangjian
                            obj.shoucang = this.shoucang
                            obj.img = img
                            sessionStorage.setItem("obj",JSON.stringify(obj))
                        },
                        err=>{
                            console.log(err)
                        }
                    )
                },
                err=>{
                    console.log(err)
                }
            )
        },
        changegd(){
            this.gaibiangd = !this.gaibiangd
            if(this.gaibiangd){
                this.myarr = this.chuangjian
            }else{
                this.myarr = this.shoucang
            }
        },
        golove(){
            // this.$router.push({path:"/songlist",query:{id:368258371}})
        }
    }
}
</script>
<style lang="less" scoped>
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
}
a{
    text-decoration: none;
    color:#333;
    -webkit-tap-highlight-color:transparent;
}
.thecenterbox{
    width: 85%;
    margin: 0 auto;
}
img{
    width: 100%;
}
.myhis{
    display: flex;
    li{
        overflow: hidden;
        width: 100px;
        height:100px;
        // border:1px solid black;
        border-radius: 10px;
        margin-right: 20px ;
        position: relative;
        img{
            width: 100%;
        }
        .mytitle{
            color: white;
            position: absolute;
            bottom: 5%;
            left: 5%;
            font-family: 'YouYuan';
            font-weight: 700;
            text-shadow: 1px 0px 0px #333;
        }
    }
}
.myhissvg{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    .thesvg{
        position: relative;
        width: 100%;
        height: 100%;
        svg{
            position: absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
            color: #e3e3e3ab;
            font-size: 2rem;
        }
    }
}
.mygedan{
    display: flex;
    padding: 20px;
    justify-content: space-around;
    li{
        
    }
}
h2{
    font-weight: 500;
}
.gd{
    width: 100%;
    // height: 300px;
    border-radius: 10px;
    background-color: white;
    padding: 10px;
    box-sizing: border-box;
    li{
        margin: 15px 0px ;
        position: relative;
        a{
            display: flex;

        }
    }
}
.gdimg{
    width: 25%;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0px;
    img{
        width: 100%;
        border-radius: 10px;
    }
}
.gdname{
    margin-left:15px;
    width: 60%;
    .gdtitle{
        font-size: 1rem;
        color: #333;
        margin-top: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .songnum{
        font-size: 0.8rem;
        margin-top: 5px;
    }
}
.gdding{
    position: absolute;
    top: 40%;
    right: 0%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: rgb(163,163,163);

}
.gbgd{
    font-size: 1.3rem;
    color: #777;
}
.gdactive{
    position: relative;
    color:#5893e2 !important;
    font-weight: 600 !important;
    &::after{
    position: absolute;
    top: 120%;
    right: 0%;
    content: '';
    border-radius: 10px;
    width: 100%;
    z-index: 0;
    height: 2px;
    background-color: #5893e2;
  }
}
</style>